<template>
	<view class="content">
		<view class="header">
			<view class="header-logo">
				<image src="../../static/index/heade-logo-tuya.png" mode=""></image>
			</view>
			<view class="logo">
				<image class="log" src="../../static/index/logo-tuya.png" mode=""></image>
				<image class="address" src="../../static/images/定位.png" mode="widthFix" @click="address"></image>
				<view class="addtitle"  @click="address" v-if="store.address">{{store.address.city? store.address.city : '--'}}</view>
			</view>
		</view>
		<qs-address
		    v-model:show="selectorVisible" 
		    @onSelectCity="City" 
		    :currentCity="currentCity" />
		<view class="main">
			<view class="contents">
				<view class="contents-item" v-for="(item, index) in state.goodList" :key="index" @click="toBuy(item.id)">
					<image :src="item.cover_img" mode="aspectFill"></image>
					<view class="text" style="wdith: 100%; display: flex; align-items: center; justify-content: space-between;">
						<text>{{item.name}}</text>
						<text v-if="item.step">{{item.step}}km</text>
					</view>
				</view>
			</view>
			<!-- 购买门票轮播 -->
			<!-- <view class="main-item">
				<image class="title" src="../../static/index/购买门票@2x-tuya.png" mode="widthFix"></image>
				<view class="banner">
					<swiper class="swiper" circular :indicator-dots="data.indicatorDots" :current="data.current" @change="change">
						<swiper-item v-for="(ite, ind) in data.swiperData" :key="ind">
							<view class="swiper-item">
								<image :src="ite.cover_img"></image>
							</view>
						</swiper-item>
					</swiper>
				</view>
				<view class="bottom">
					<view class="bottom-wrap">
						<view class="left">
							<view class="title">{{data.swiperData[data.current].name}}</view>
							<view class="time">
								开馆日期：{{data.swiperData[data.current].create_time}} - <text>{{data.swiperData[data.current].update_time}}</text>
							</view>
							<view class="tip">
								地址：{{data.swiperData[data.current].create_time}}
							</view>
							<view class="tip">
								未来艺术家作品，期待一下下吧！
							</view>
						</view>
						<view class="right" @click="toBuy(data.swiperData[data.current].id)">
							立即抢票
						</view>
					</view>
				</view>
			</view> -->
			
			<!-- 加入会员 -->
			<!-- <view class="buy-vip" style="padding: 0rpx 36rpx;" @click="JoinVip()">
				<image class="top" style="width: 434rpx; height: 180rpx;" src="../../static/my/加入会员@2x.png" mode=""></image>
				<image class="card" style="width: 100%; height: 180rpx;" src="../../static/my/会员卡@2x.png" mode="widthFix"></image>
			</view> -->
		</view>
		
		<TabBar :current="1"></TabBar>
	</view>
</template>

<script setup>
import TabBar from '@/components/TabBar.vue';
import { reactive, onMounted, ref, watch } from 'vue';

import {
	useCartStore
} from '@/store/cart.js';
import { goodsList } from '@/request/api/vip.js';
const store = useCartStore();
const data = reactive({
	indicatorDots: true,
	current: 0,
	swiperData: [{
		name: '123',
		create_time: '233'
	}], 
	// 门票
	page: {
		page: 1,
		limit: 10,
		model: 1 // 1 票务 
	}
})

const currentCity = ref("--") // 当前城市
const selectorVisible = ref(false) // 是否显示弹窗组件

function City({ detail }) {
	let address = {
		city: detail.city.fullname,
		location: { 
			lat: detail.city.location.lat,
			lng: detail.city.location.lng
		}
	}
	uni.setStorage({
		key: 'City_Name',
		data: detail.city.fullname
	});
	store.setAddress(address);
	getDetailData();
  }
	
const state = reactive({
	goodList: {}
})

onMounted((e) => {
	getDetailData()
})

const address = () => {
	selectorVisible.value = true;
}

// 门票列表
const getDetailData = async () => {
	const resultData = await goodsList();
	if (store.address) {
		resultData.data.list.map(item => {
			item.step = distance( item.lng, item.lat, store.address.location.lat, store.address.location.lng);
		});
	}
	state.goodList = resultData.data.list;
	
}

// 票详情
const toBuy = (id) => {
	uni.navigateTo({
		url: `./buyticket?id=${id}`
	})
}

const distance = (la1, lo1, la2, lo2) => {
	console.log(la1, lo1, la2, lo2)
    var La1 = la1 * Math.PI / 180.0;
    var La2 = la2 * Math.PI / 180.0;
    var La3 = La1 - La2;
    var Lb3 = lo1 * Math.PI / 180.0 - lo2 * Math.PI / 180.0;
    var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(La3 / 2), 2) + Math.cos(La1) * Math.cos(La2) * Math.pow(Math.sin(Lb3 / 2), 2)));
    s = s * 6378.137;
    s = Math.round(s * 10000) / 10000;
    s = s.toFixed(2);
    return s;
}
</script>

<style lang="scss" scoped>
	page {
		background: #F7F7F7;
	}
	.content {
		position: relative;
		.header {
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
			.header-logo > image {
				width: 100%;
				height: 330rpx;
			}
			.logo .log {
				width: 226rpx;
				height: 34rpx;
				position: absolute;
				top: 100rpx;
				left: 20rpx;
			}
			
			.address {
				position: absolute;
				top: 96rpx;
				left: 280rpx;
				width: 40rpx;
				height: 40rpx;
			}
			
			.addtitle {
				position: absolute;
				top: 96rpx;
				left: 320rpx;
				width: 200rpx;
				height: 40rpx;
				color: #fff;
				opacity: .7
			}
		}
		.main {
			width: 100%;
			height: auto;
			background: #FFFFFF;
			border-radius: 70rpx 70rpx 0rpx 0rpx;
			position: absolute;
			top: 200rpx;
			padding-bottom: 30rpx;
			.main-item {
				margin-top: 20rpx;
				padding: 36rpx;
				padding-top: 0rpx;
				.title {
					width: 562rpx;
				}
				.banner >image{
					// width: 100%;
				}
				
				.swiper-item {
					::v-deep image {
						width: 100% !important;
						height: 800rpx;
					}
				}
				.swiper {
					width: 100%;
					height: 800rpx;
				}
				
				.bottom {
					width: 100%;
					height: 168rpx;
					background: #D864B1;
					.bottom-wrap {
						padding: 30rpx 36rpx;
						box-sizing: border-box;
						display: flex;
						align-items: center;
						.left {
							width: 500rpx;
							height: 108rpx;
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							.title {
								font-size: 20rpx;
								font-family: PingFangSC-Semibold, PingFang SC;
								font-weight: 600;
								color: #FFFFFF;
								line-height: 28rpx;
							}
							.time {
								display: block;
								width: fit-content;
								height: 28rpx;
								padding: 0rpx 10rpx;
								line-height: 28rpx;
								background: #FFFFFF;
								border-radius: 14rpx;
								font-size: 14rpx;
								font-family: GenShinGothic-Monospace-Bold, GenShinGothic-Monospace;
								font-weight: bold;
								color: #D864B1;
								text {
									font-size: 14rpx;
									font-family: PingFangSC-Regular, PingFang SC;
									font-weight: 300;
									color: #D864B1;
									line-height: 18rpx;
								}
							}
							.tip {
								font-size: 12rpx;
								font-family: PingFangSC-Light, PingFang SC;
								font-weight: 300;
								color: #FFFFFF;
								line-height: 16rpx;
							}
						}
						.right {
							width: 244rpx;
							height: 50rpx;
							background: #FFFFFF;
							border-radius: 26rpx;
							text-align: center;
							color: #fff;
							line-height: 50rpx;
							font-size: 20rpx;
							color: #D864B1;
						}
					}
				}
				
				::v-deep .uni-swiper-dot-active {
					width: 16px !important;
					height: 6rpx;
					border-radius: 5rpx;
					background-color: red !important;
				}
				::v-deep .wx-swiper-dot {
					// 指示点元素默认样式
					width: 16rpx !important;
					height: 16rpx !important;
					background-color: rgba(0, 0, 0, .5) !important;
					border-radius: 50% !important;
				}
						
				::v-deep .wx-swiper-dot-active {
					// 指示点元素激活（当前选中）状态样式
					width: 16rpx !important;
					height: 16rpx !important;
					background-color: #FFFFFF !important;
					border-radius: 6rpx !important;
				}
				
				::v-deep .wx-swiper-dots { // 指示点整个区域
					margin-top: 230rpx;
					margin-right: 40rpx;
				}
			}
		}
	}
	
	.buy-vip {
		padding-bottom: 200rpx !important;
	}
	
	.contents {
		padding: 30rpx 20rpx 160rpx 20rpx;
		.contents-item {
			height: 400rpx;
			margin-bottom: 20rpx;
			border-radius: 20rpx;
			overflow: hidden;
			position: relative;
			image {
				position: absolute;
				border-radius: 60rpx;
				overflow: hidden;
				top: 0;
				left: 0;
				width: 100%;
				height: 400rpx;
			}
			.text {
				width: 680rpx;
				position: absolute;
				bottom: 20rpx;
				left: 20rpx;
				color: #fff !important;
			}
		}
	}
</style>
